<template>
    <Modal width="45" :value.sync="visible" :title="title">
        <Form ref="environment" :model="environmentForm" :rules="ruleEnvironment" :label-width="80">
            <FormItem label="环境名称" prop="name">
                <Input v-model="environmentForm.name" placeholder="请输入"/>
            </FormItem>
            <FormItem label="所属项目" prop="project">
                <Select v-model="environmentForm.project" placeholder="请选择项目" @change="projectChange">
                    <Option v-for="item in projectList" :value="item.id" :key="item.id">{{
                        item.name
                        }}
                    </Option>
                </Select>
            </FormItem>
            <FormItem label="环境地址" prop="base_url">
                <Input v-model="environmentForm.base_url"
                       placeholder="格式：域名(或IP):端口号，示例：https://www.baidu.com"/>
            </FormItem>
            <FormItem label="环境描述" prop="description">
                <Input v-model="environmentForm.description" type="textarea" :rows="4" placeholder="请输入"/>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button @click="cancel">取消</Button>
            <Button type="primary" @click="ok">确定</Button>
        </div>
    </Modal>
</template>

<script>
import {envAdd, envDetail, envEdit, projectList} from "@/utils/api";
import vueJsonEditor from "vue-json-editor";

export default {
    name: "environment_form",
    props: {
        visible: Boolean,
        title: String,
        edit: Boolean,
        id: Number,
        projectList: Array,
    },
    components: {
        vueJsonEditor
    },

    watch: {
        'edit': {
            handler(v) {
                if (v) {
                    envDetail(this.id).then(res => {
                        console.log(res)
                        if (res.data.result === 1){
                            this.environmentForm.name = res.data.data.environment.name;
                            this.environmentForm.base_url = res.data.data.environment.base_url;
                            this.environmentForm.description = res.data.data.environment.description;
                            this.environmentForm.project = res.data.data.environment.project
                        }
                        // if (res.data.errno !== 0) {
                        //     this.$message.error(res.data.errmsg)
                        //     return
                        // }
                        // this.$Message.success("查询成功");
                        // this.environmentForm = res.data.data;
                        // // this.environmentForm.variables = res.data.data.variables
                        // this.environmentForm.headers = JSON.parse(res.data.data.headers);
                        // this.environmentForm.variables = JSON.parse(res.data.data.variables);
                        // // this.environmentForm.name = res.data.data.name;
                        // // this.environmentForm.domain = res.data.data.domain;
                    })
                }
            }
        }
    },
    data() {
        return {
            projectList: [],
            environmentForm: {
                name: "",
                base_url: "",
                description: "",
                project: null
            },
            ruleEnvironment: {
                name: [
                    {required: true, message: '环境名称不能为空', trigger: 'blur'}
                ],
                base_url: [
                    {required: true, message: '环境地址不能为空', trigger: 'blur'}
                ],
                project: [
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (value) {
                                // 验证成功
                                callback();
                            } else {
                                // 验证失败
                                callback(new Error('请选择所属项目'));
                            }
                        },
                        trigger: 'change' // 触发校验的事件
                    }
                ]
            }
        }
    },
    created() {
        // this.getProjectList();
    },
    methods: {
        // 获取项目列表
        getProjectList() {
            projectList().then(res => {
                this.projectList = res.data.data.projects;
            })
        },
        projectChange(selectedProjectId) {
            this.environmentForm.project = selectedProjectId;
        },
        ok() {
            this.$refs['environment'].validate((valid) => {
                if (valid) {
                    if (!this.edit) {
                        const obj = {
                            name: this.environmentForm.name,
                            base_url: this.environmentForm.base_url,
                            project: this.environmentForm.project,
                            description: this.environmentForm.description
                        }
                        console.log(this.environmentForm)
                        envAdd(obj).then(res => {
                            if (res.data.result === 1) {
                                this.$message.success("添加成功!")
                                this.cancel()
                                return;
                            } else {
                                this.$Message.error(res.data.error_message)
                                this.cancel()
                                return;
                            }
                        })
                    } else {
                        // 编辑操作
                        const obj = {
                            ...this.environmentForm,
                            headers: JSON.stringify(this.environmentForm.headers),
                            variables: JSON.stringify(this.environmentForm.variables),
                        }
                        envEdit(obj).then(res => {
                            if (res.data.errno !== 0) {
                                this.$message.error(res.data.errmsg)
                                return
                            }
                            this.$Message.success(res.data.data)
                            this.cancel()
                        })
                        console.log(this.environmentForm, obj)
                    }
                } else {
                    this.visible = true
                }
            })
        },
        cancel() {
            this.$emit("close", false);
        }
    }
}
</script>

<style scoped>

</style>
